<template>
    <div>
        <div class="header">
            <el-form :model="searchForm" inline>
                <el-form-item label="用户名称">
                    <el-input placeholder="请输入用户名称进行搜索" v-model="searchForm.account"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSeach">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button @click="showAddAccount">新增</el-button>
        </div>
        <el-table :data="tabledata" style="width: 100%;">
            <el-table-column prop="account" label="用户名" />
            <el-table-column prop="level" label="等级" />
            <el-table-column lable="操作">
                <template #default="{ row }">
                    <el-button size="small" @click="updateAccount(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deteleAccount(row)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
        <!-- 新增，修改 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" @close="resetAccountDialog">
            <el-form :model="accountForm" label-width="120px">
                <el-form-item label="用户名称">
                    <el-input placeholder="请输入用户名称" v-model="accountForm.account"></el-input>
                </el-form-item>
                <el-form-item label="等级">
                    <el-input placeholder="请输入用户等级" v-model="accountForm.level"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetAccountDialog">取消</el-button>
                    <!-- 添加 -->
                    <el-button type="primary" @click="addAccount" v-if="dialogType === dialogTypeMap.add">确认</el-button>
                    <!-- 修改 -->
                    <el-button type="primary" @click="updateAccountHandle" v-else>确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, computed, getCurrentInstance } from 'vue'
import { getDataApi, addAccountApi, deteleAccountApi, updateAccountApi } from '../utils/mockServer/db.js'
const DEFAULTLEVEL = 1
const DIALOGTITLEMAP = {
    0: '新增',
    1: '修改'
}
const { proxy: _this } = getCurrentInstance()
const tableData = ref([])
const searchForm = ref({
    account: ''
})
const accountForm = ref({
    account: '',
    level: DEFAULTLEVEL,
    id: 0
})
// 新增修改弹窗
const dialogVisible = ref(false)
const dialogTypeMap = ref({
    add: 0,
    modify: 1
})
// 弹窗类型map
const dialogType = ref(dialogTypeMap.value.add)
const dialogTitle = computed(() => {
    return DIALOGTITLEMAP[dialogType]
})
// 请求全部数据
const getData = (account) => {
    tableData.value = getDataApi({ account })
}
getData()
// 搜索操作
const handleSeach = () => {
    getData(searchForm.value.account)
}
const showAddAccount = () => {
    dialogVisible.value = true
    dialogType.value = dialogTypeMap.value.add
}
const addAccount = () => {
    const { account, level } = accountForm.value
    const accountObj = {
        account,
        level
    }
    // 调用接口
    addAccountApi(accountObj)
    _this.$message({
        type: 'success',
        message: '添加成功',
    })
    getData()
    resetAccountDialog()
}
const updateAccount = (row) => {
    // 展示弹框并切换弹框内容
    dialogVisible.value = true
    dialogType.value = dialogTypeMap.value.modify
    // 将要修改的内容显示到输入框中
    const { account, level, id } = row
    accountForm.value.account = account
    accountForm.value.level = level
    accountForm.value.id = id


}
const updateAccountHandle = () => {
    updateAccountApi(accountForm.value)
    _this.$message({
        type: 'success',
        message: '更新成功',

    })
    getData()
    resetAccountDialog()
}
const deteleAccount = (row)=>{
_this.$confirm('是否要删除账号','警告',{
    confirmButtonText:'确认',
    cancelButtonText:'取消',
    type:'warning',
        }
    )
    .then(()=>{
        deteleAccountApi(row)
        _this.$message({
            type:'success',
            message:'成功',

        })
        getData()
        },()=>{
            _this.$message({
                type:'info',
                message:'取消删除',

            })
        }
    )
}
// 复位弹框状态以及弹框内form表单状态
const resetAccountDialog=()=>{
    dialogVisible.value = false,
    accountForm.value.account = ''
    accountForm.value.level = DEFAULTLEVEL
}

</script>
<style scoped>
    .header{
        display: flex;
        justify-content: space-between;
    }
</style>